Welcome to the Bootstrap Tutorials, The intent of these tutorials to teach you the basics of Bootstrap Framework using which you can create web projects with ease. In the tutorial, we will discuss Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components, and Bootstrap Plugins.
Apart from the tutorials, we will also cover Interview Questions, Issues, and How To’s of Bootstrap.
Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and background. This is covered in detail in the section Bootstrap Basic Structure
CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.
Components − Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout Components.
JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in detail in the section Bootstrap Plugins.
Customize − You can customize Bootstrap's components, fewer variables, and jQuery plugins to get your very own version.
Inclined to build a profession as Bootstrap Developer? Then here is the blog post on, explore Bootstrap Training
Activate the Bootstrap framework, you need to include all the appropriate files and follow a proper HTML structure. Here, we will build the structure first and then see which files are required. The first thing that you should note is that it requires an HTML5 doctype declaration at the top:
<!DOCTYPE html>
We will set the metacharacter to utf-8 because we will be using special characters in our project and we want the browser to parse them correctly. Twitter Bootstrap also specifies the use of utf-8 in their documentations for better compatibility.
<meta charset=”utf-8”>
Then we will set normal html tags like <html>, <head> and <body> which are basic tags of html. Your index.html page should look as below.
We will now proceed to include the necessary style sheet which is bootstrap.css.
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
Now that we have our CSS ready, we will include all the required JavaScript files. Firstly, you need to include a jQuery file, for this, I will suggest including from the jQuery CDN, as below.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Then we will include the Bootstrap file.
<script src=”js/bootstrap.js”></script>
All these scripts should lie just above the end body tag </body>, in consideration of the performance of your web page.
Finally, we are done with the process of including all the necessary files. You are now set to start building the various components of your website. Your index.html should look like this.
Example
<p><code><header></code> is wrapped as an inline element.</p> <p>To display code as a standalone block element use <pre> tag as:</p> <pre> <article> <h1>Article Heading</h1> </article> </pre>
<header> is wrapped as an inline element.
To display code as a standalone block element use <pre> tag as:
<article>
<h1>Article Heading</h1>
</article>
The container is used to set the content's margins dealing with the responsive behaviors of your layout. It contains the row elements and the row elements are the containers of columns (known as grid system).
There are two container classes in Bootstrap:
<html> <body> <div class="container"> <div class="row"> <div class="col-md-xx"></div> ... </div> <div class="row"> <div class="col-md-xx"></div> ... </div> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Container</h1>
<p>container content</p>
</div>
<div class="container-fluid">
<h1>Container-fluid</h1>
<p>container-fluid content</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
-It is very easy to use. Anybody having a basic knowledge of HTML and CSS can use Bootstrap.
-It facilitates users to develop a responsive website.
-It is compatible with most browsers like Chrome, Firefox, Internet Explorer, Safari and Opera, etc.
You liked the article?
Like: 0
Vote for difficulty
Current difficulty (Avg): Medium
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
